<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        /*
        6.1 什么是BOM
            + BOM是Browser Object Model的简写，即浏览器对象模型。

            + BOM由一系列对象组成，是访问、控制、修改浏览器的属性和方法(通过window对象及属性的一系列方法 控制浏览器行为的一种编程)

            + BOM没有统一的标准(每种客户端都可以自定标准)。

            + BOM编程是将浏览器窗口的各个组成部分抽象成各个对象,通过各个对象的API操作组件行为的一种编程

            + BOM编程的对象结构如下

                + window 顶级对象,代表整个浏览器窗口
                    + location对象                 window对象的属性之一,代表浏览器的地址栏
                    + history对象                   window对象的属性之一,代表浏览器的访问历史
                    + screen对象                    window对象的属性之一,代表屏幕
                    + navigator对象               window对象的属性之一,代表浏览器软件本身
                    + document对象              window对象的属性之一,代表浏览器窗口目前解析的html文档
                    + console对象                  window对象的属性之一,代表浏览器开发者工具的控制台
                    + localStorage对象          window对象的属性之一,代表浏览器的本地数据持久化存储
                    + sessionStorage对象      window对象的属性之一,代表浏览器的本地数据会话级存储
        6.2 通过BOM编程实现会话级和持久级数据存储

            + 会话级数据 : 内存型数据,是浏览器在内存上临时存储的数据,浏览器关闭后,数据失去,通过window的sessionStorge属性实现
            + 持久级数据 : 磁盘型数据,是浏览器在磁盘上持久存储的数据,浏览器关闭后,数据仍在,通过window的localStorge实现
            + 可以用于将来存储一些服务端响应回来的数据,比如:token令牌,或者一些其他功能数据,根据数据的业务范围我们可以选择数据存储的会话/持久 级别
        */
        function goAtguigu(){
                var flag =confirm("即将跳转到尚硅谷官网,本页信息即将丢失,确定吗?")
                if(flag){
                    // 通过BOM编程地址栏url切换
                    window.location.href="http://www.atguigu.com"
                }
           }
        function saveItem(){
            // 让浏览器存储一些会话级数据
            window.sessionStorage.setItem("sessionMsg","sessionValue")
            // 让浏览器存储一些持久级数据
            window.localStorage.setItem("localMsg","localValue")

            console.log("haha")
        }

        function removeItem(){
            // 删除数据
            sessionStorage.removeItem("sessionMsg")
            localStorage.removeItem("localMsg")
        }

        function readItem(){
            console.log("read")
            // 读取数据
            console.log("session:"+sessionStorage.getItem("sessionMsg"))
            console.log("local:"+localStorage.getItem("localMsg"))
        }
    </script>
</head>
<body>
    <input type="button" value="跳转到尚硅谷" onclick="goAtguigu()"/> <br>
    <button onclick="saveItem()">存储数据</button>
    <button onclick="removeItem()">删除数据</button>
    <button onclick="readItem()">读取数据</button>
</body>
</html>